<template>
  <div ref="mapChart" id="mapChart"></div>
</template>
<script setup>
import { ref, onMounted, onBeforeUpdate } from "vue";
import * as echarts from "echarts";
import jsonData from "../utils/map.json";
let mapChart = ref(null);
let address = ref([
  {
    value: [119.754859, 31.189767],
    label: {
      name: "华东区域中心",
      value1: 0,
      value2: 0,
      value3: 0,
    },
  },
  {
    value: [112.41995, 33.18994],
    label: {
      name: "华中区域中心",
      value1: 0,
      value2: 0,
      value3: 0,
    },
  },
  {
    value: [96.294711, 32.371801],
    label: {
      name: "西南区域中心",
      value1: 0,
      value2: 0,
      value3: 0,
    },
  },
  {
    value: [110.3467, 23.4899],
    label: {
      name: "华南区域中心",
      value1: 0,
      value2: 0,
      value3: 0,
    },
  },
  {
    value: [121.8154, 44.2584],
    label: {
      name: "华北区域中心",
      value1: 0,
      value2: 0,
      value3: 0,
    },
  },
]);
const props = defineProps({
  timeData: {
    type: Array,
    default: () => [
      { name: "华南区域中心" },
      { name: "西南区域中心" },
      { name: "华中区域中心" },
      { name: "华北区域中心" },
      { name: "华东区域中心" },
    ],
  },
});
let mapData = () => {
  echarts.registerMap("china", jsonData);

  let regions = [
    { name: "华南区域中心", value: 100 },
    { name: "西南区域中心", value: 1010 },
    { name: "华中区" },
    { name: "华北区" },
    { name: "华东区" },
  ];
  props.timeData.forEach((item) => {
    address.value.forEach((oper) => {
      if (oper.label.name == item.qyzxmc) {
        oper.label.value1 = item.zjlc;
        oper.label.value2 = item.zjlr;
        oper.label.value3 = item.zjye;
      }
    });
  });
  var point_circle = address.value;
  let option = {
    tooltip: {},
    geo: {
      map: "china",
      zoom: 1.3,
      roam: true,
      layoutCenter: ["50%", "68%"],
      layoutSize: "100%",
      itemStyle: {
        normal: {
          areaColor: {
            type: "linear-gradient",
            x: 0,
            y: 400,
            x2: 0,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: "rgba(37,108,190,0.3)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(15,169,195,0.3)", // 50% 处的颜色
              },
            ],
            global: true, // 缺省为 false
          },
          borderColor: "#4ecee6",
          borderWidth: 1,
        },
        emphasis: {
          areaColor: {
            type: "linear-gradient",
            x: 0,
            y: 300,
            x2: 0,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: "rgba(37,108,190,1)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(15,169,195,1)", // 50% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
      emphasis: {
        itemStyle: {
          areaColor: "#0160AD",
        },
        label: {
          show: false,
        },
      },
      zlevel: 0,
      borderColor: "#4ecee6",
      borderWidth: 1,
      shadowColor: "rgba(128, 217, 248, 0.2)",
      shadowOffsetX: -2,
      shadowOffsetY: 1,
      shadowBlur: 1,
      borderColor: "rgba(147, 235, 248, 0.2)",
    },
    tooltip: {
      backgroundColor: "#0d62eca9",
      textStyle: {
        color: "#fff", // 设置字体颜色为黄色
        fontSize: 12,
      },
      formatter(params) {
        console.log(params, "params");

        // return `${data.label.name}<br />资金流入:${data.label.value2}<br />资金流出:${data.label.value1}<br />资金余额:${data.label.value3}`;
      },
    },
    emphasis: {
      //地图高亮
      itemStyle: {
        color: "#cdeffd2a",
      },
      label: {
        show: false,
      },
    },
    regions: regions.map((item) => ({
      name: item.name,
      itemStyle: {
        areaColor: "#0160AD",
        //   areaColor: item.itemStyle.areaColor,
        //   borderColor: "#fff",
        //   borderWidth: 0.9,
      },
    })),

    series: [
      {
        type: "effectScatter",
        coordinateSystem: "geo",
        rippleEffect: {
          number: 7,
          scale: 5,
          brushType: "stroke",
        },
        itemStyle: {
          color: "#CF8400",
        },
        tooltip: {
          formatter({ data }) {
            return `${data.label.name}<br />资金流入:${data.label.value2}<br />资金流出:${data.label.value1}<br />资金余额:${data.label.value3}`;
          },
          backgroundColor: "#0d62eca9",
          textStyle: {
            color: "#FFF", // 设置 tooltip 文字颜色为红色
          },
          borderWidth: 0, // 设置边框宽度为 2px
        },
        label: {
          show: true,
          offset: [30, -20],
          color: "#FFF",
          fontSize: 18,
          formatter({ data }) {
            return `${data.label.name}`;
          },
        },
        data: point_circle,
      },
    ],
  };
  const chart = echarts.init(mapChart.value);
  chart.setOption(option);
};
onMounted(() => {
  mapData();
});
onBeforeUpdate(() => {
  mapData();
});
</script>
<style lang="less" scoped>
#mapChart {
  height: 44vh;
  width: 39vw;
  border-radius: 6px;
  overflow: hidden;
}
</style>
